<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客首页</title>
    <link href="main.css" rel="stylesheet" type="text/css">
    <link href="reset.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="main-warpper">
   <header>
       <!--页头-->
       <nav class="nav-bar">
           <div class="logo"><a href="index.html" id="a-logo">同Young不同样</a></div>
          <ul>
              <!--将首页的标签class设置成active表示属于激活状态-->
              <li><a href="index.html" class="active">首页</a></li>
              <li><a href="#"><h3>个人动态</h3></a></li>
              <li><a href="#">个人空间</a></li>
              <li><a href="#">相 册</a></li>
              <li><a href="#">悄悄话</a></li>
              <li><a href="#">音  乐</a></li>
              <li id="sidebar_trigger"><a href="#">更多</a></li>
          </ul>
       </nav>
       <div id="banner">
            <div class="inner">
                <h1>同Young不同样</h1>
                <p class="sub-heading">每段路都有即将要来的路程，每颗心都有值得期待的成份。一次旅行的启程，暗示另一种人生的启程。偶尔在路上，依稀看到天色渐亮，收拾行囊，未知的旅程，形色的人们，值得期待的永远是明天。收拾好心情，怀揣最初的梦想，我们一起去旅行。</p>
                <button>了解我</button>
                <div class="more">
                    <span class="span-more">更多</span>
                </div>
            </div>
       </div>
   </header>
    <div class="content">
        <!--内容-->
        <section class="green-section">
            <div class="wapper">
                <div>
                    <h2>同Young就要不一样！</h2>
                    <div class="hr">

                    </div>
                    <p class="sub-heading">Life is just a field of improvisation, until every journey, be my stage. </p>
                    <p class="sub-heading"> 人生本来就是一场即兴演出,直到每段旅程,变成我的舞台。</p>
                </div>
                <div class="icon-group">
                    <span class="icon"><img src="img/yinyue.png" class="icon-group-img"></span>
                    <span class="icon"><img src="img/book.png" class="icon-group-img"></span>
                    <span class="icon"><img src="img/lvxing.png" class="icon-group-img"></span>
                    <span class="icon"><img src="img/meishi.png" class="icon-group-img"></span>
                </div>
            </div>
        </section>
        <section class="gray-section">
            <div class="artical-preview">
                <div class="img-section">
                    <img src="img/dengfuru2.jpg" alt="图片加载失败" id="music1"/>
                </div>
                <div class="text-section">
                    <h2>又一个标题</h2>
                    <div class="sub-heading">
                        邓福如：如果有如果
                    </div>
                    <p>
                        &nbsp;&nbsp;&nbsp;&nbsp;You are my everything
                        and I really love you.
                        在泪干了以后，想听你说,love you.
                        这世界，如果有如果，
                        如果一切重头，
                        如果你还在，
                        请，说你爱我。
                    </p>
                </div>
                <div class="play">
                    <span class="span-play"><img src="img/bofang222.png" id="play-music1"></span>
                </div>
            </div>
        </section>
        <section class="gray-section">
            <div class="artical-preview">
                <div class="text-section">
                    <h2>又一个标题</h2>
                    <div class="sub-heading">
                        张 悬：关于我爱你
                    </div>
                    <p>
                        &nbsp;&nbsp;&nbsp;&nbsp;你拥抱的并不总是也拥抱你，而我想说的谁也不可惜，去挥霍和珍惜是同一件事情。我所有的何方何必何其荣幸，在必须发现我们终将一无所有前，至少你可以说。我懂活着的最寂寞，我拥有的都是侥幸啊，我失去的都是人生，当你不遗忘也不想曾经，我爱你。
                    </p>
                </div>
                <div class="play">
                    <span class="span-play"><img src="img/bofang222.png" id="play-music2"></span>
                </div>
                <div class="img-section">
                    <img src="img/pic02.jpg" alt="图片加载失败">
                </div>
            </div>
        </section>
        <section class="gray-section">
            <div class="artical-preview">
                <div class="img-section">
                    <img src="img/pic03.jpg" alt="图片加载失败">
                </div>
                <div class="text-section">
                    <h2>又一个标题</h2>
                    <div class="sub-heading">
                        田馥甄：小幸运
                    </div>
                    <p>
                        &nbsp;&nbsp;&nbsp;&nbsp;原来你是我最想留住的幸运，原来我们和爱情曾经靠得那么近。那为我对抗世界的决定，那陪我淋的雨，一幕幕都是你一尘不染的真心。与你相遇 好幸运，可我已失去为你泪流满面的权利，但愿在我看不到的天际。你张开了双翼，遇见你的注定，她会有多幸运。
                    </p>
                </div>
                <div class="play">
                    <span class="span-play"><img src="img/bofang222.png" id="play-music3"></span>
                </div>
                <button class="more-music">了解更多音乐</button>
            </div>
        </section>
        <section class="gray-section">
            <div class="artical-preview">
                <div class="img-section">
                </div>
                <div class="text-section">
                </div>
            </div>
        </section>

    </div>
    <footer>
        <!--页脚-->
        <ul class="share-group">
            <li><a href="#"><img src="img/facebook(1).png"></a></li>
            <li><a href="#"><img src="img/weixin.png"></a></li>
            <li><a href="#"><img src="img/QQ.png"></a></li>
            <li><a href="#"><img src="img/tuite.png"></a></li>
            <li><a href="#"><img src="img/weibo.png"></a></li>
            <li><a href="#"><img src="img/QQ2.png"></a></li>
        </ul>
        <div class="copy">
            &copy同Young不同样--2016
        </div>
    </footer>
        <!--侧边栏编写-->
        <div class="mask">

        </div>
        <div id="sidebar">
            <ul>
                <li><a href="#"><img src="img/gerendangan.png" class="sidebar_img"><span>个人档案</span></a></li>
                <li><a href="http://www.jianshu.com/" target="_blank"><img src="img/wenzhang.png" class="sidebar_img"><span>文章</span></a></li>
                <li><a href="#"><img src="img/shuoshuo.png" class="sidebar_img"><span>说说</span></a></li>
                <li><a href="#"><img src="img/share.png" class="sidebar_img"><span>分享</span></a></li>
                <li><a href="#"><img src="img/liuyanban.png" class="sidebar_img"><span>留言板</span></a></li>
                <li><a href="#"><img src="img/shipin.png" class="sidebar_img"><span>视频</span></a></li>
                <li><a href="http://www.jianshu.com/bookmarks"><img src="img/shoucang.png" class="sidebar_img"><span>我的收藏</span></a></li>
            </ul>
        </div>
        <button class="back-to-top">返回顶部</button>
        <!--<div id="div-music">
            <div>
                <video width="100%" controls>
                    <source src="mv/ruguoyouruguo.mkv" type="video/mp4">
                    <source src="mv/ruguoyouruguo.mkv" type="video/ogg">
                    您的浏览器不支持 HTML5 video 标签。
                </video>
            </div>
            <button id="music-btn1" class="music-btn">收起</button>
        </div>
    </div>
    <div id="div-music2">
        <div>
            <video width="100%" controls>
                <source src="mv/guanyu.mkv" type="video/mp4">
                <source src="mv/guanyu.mkv" type="video/ogg">
                您的浏览器不支持 HTML5 video 标签。
            </video>
        </div>
        <button id="music-btn2" class="music-btn">收起</button>
    </div>
    </div>-->

    <!--<div id="div-music3">
        <div>
            <video width="100%" controls>
                <source src="mv/xiaoxingyun.mkv" type="video/mp4">
                <source src="mv/xiaoxingyun.mkv" type="video/ogg">
                您的浏览器不支持 HTML5 video 标签。
            </video>
        </div>
        <button id="music-btn3" class="music-btn">收起</button>
    </div>
    </div>-->
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="main.js"></script>
</body>
</html>